<template>
	<view v-if="isShow" @tap="close" class="image-preview" :style="{width:systemInfo.screenWidth+'px',height:systemInfo.screenHeight+'px'}">
        <view class="dark_bg" :class="{active:active}"></view>
        <swiper  class="swiper" @change="change" :current="current" :disable-programmatic-animation="true" :style="{width:systemInfo.screenWidth+'px',height:systemInfo.screenHeight+'px'}">
			<swiper-item v-for="(item,index) in imageUrl" :key="index">
				<view class="swiper-item" :style="{width:systemInfo.screenWidth+'px',height:systemInfo.screenHeight+'px'}">
					<image @tap="close" class="item-image" :style="currentStyle[index]" mode="scaleToFill" :src="item"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="indicator" v-if="indicatorShow" :style="{ width:systemInfo.screenWidth+'px' }">
			<view class="indicator-dots" :class="`${index==current?'dots-yes':'dots-no'}`" v-for="(item,index) in imageUrl"></view>
		</view>
	</view>
</template>

<script setup lang="tsx" name="imagePreview">
import { nextTick, ref } from 'vue';

const systemInfo = ref(uni.getSystemInfoSync());
const active = ref(false);
const current = ref(0);
//const swiperShow = ref(false);
const currentStyle:any = ref([]);//图片位置
const imageUrl:any = ref();//图片地址
const isShow = ref(false);
const indicatorShow = ref(false);
const idPre = ref('');

let startStyle:any = [];
const open = (params:any) => {
	startStyle = [];//初始化
	isShow.value = true;
    idPre.value = params.idPre;
	
	let startInfo:any = JSON.parse(JSON.stringify(params.startInfo));
	imageUrl.value = JSON.parse(JSON.stringify(params.urls));
	current.value = params.index;
	
	imageUrl.value.forEach((item:string,index:number) => {
		let info = startInfo[index];
		if(info==null)info = startInfo[0];
		startStyle.push({
			width: `${info.width}px`,
			height: `${info.height}px`,
			top:`${info.top}px`,
			left:`${info.left}px`,
		});
		currentStyle.value = JSON.parse(JSON.stringify(startStyle));
		uni.getImageInfo({
			src: item, // 图片的路径  
			success: function (res:any){
				const width = res.width; // 图片的宽度  
				const height = res.height; // 图片的高度  
				
				const imgMaxWidth = systemInfo.value.screenWidth;
				const imgMaxHeight = imgMaxWidth*(height/width);
				
				let endStyle = {
				    width: `${imgMaxWidth}px`,
				    height: `${imgMaxHeight}px`,
				    top:`${(systemInfo.value.screenHeight-imgMaxHeight)/2}px`,
				    left:0,
				}
				currentStyle.value[index] = endStyle;
				if(index==0)active.value = true;
				
				
				if(imageUrl.value.length>1){
					setTimeout(()=>{
					    indicatorShow.value = true;
					},150)
				}
			}
		});
	});
}
const close = () => {
    currentStyle.value = startStyle;
    active.value = false;
	indicatorShow.value = false;
    nextTick(()=>{
        setTimeout(()=>{
            isShow.value = false;
        },150)
    })
}
const change = (e:any) => {
	current.value = e.detail.current;

    const id = '#'+idPre.value + e.detail.current;

    console.log(startStyle)

    uni.createSelectorQuery()
        .select(id)
        .boundingClientRect()
        .exec((ret) => {
            if(ret&&ret.length){
                let pos = ret[0]
                startStyle.forEach(item=>{
                    item.height=pos.height+'px'
                    item.width=pos.width+'px'
                    item.top=pos.top+'px'
                    item.left=pos.left+'px'
                })

            }
        });
}
/*
//改变组数排序，让选中的变第一个
const adjustSort = (arr:any, selectedIndex:number) => {  
  // 检查选定的下标是否有效  
  if (selectedIndex < 0 || selectedIndex >= arr.length) {  
    return arr;  
  }  
  // 移除选定的元素  
  const selectedElement = arr.splice(selectedIndex, 1)[0];  
  
  // 将左边的元素依次移到最后一个、倒数第二个等位置  
  for (let i = 0; i < selectedIndex; i++) {  
    arr.push(arr.shift());  
  }  
  // 将选定的元素插入到第一个位置  
  arr.unshift(selectedElement);  
  return arr;  
}  
*/
defineExpose({
  open,
  close
});
</script>

<style lang="scss" scoped>
.image-preview {
	position: fixed;
	z-index:500;
	top:0;
	left:0;

    .dark_bg{
        background-color: rgba(0, 0, 0);
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        opacity:0;
        z-index:1;

        /* #ifdef APP-NVUE */
        transition: opacity 0.15s linear;
        /* #endif */

        /* #ifndef APP-NVUE */
        transition: all linear .15s;
        /* #endif */

        &.active{
            opacity:1;
        }
    }
	.swiper{
		position:fixed;
		z-index:11;
		top:0;
		left:0;
		.swiper-item{
			position: relative;
			.item-image{
				position:absolute;
			    /* #ifdef APP-NVUE */
			    transition-property: width, height, left, top,opacity;
				transition-duration:0.15s;
			    transition-timing-function: linear;
			    /* #endif */
			
			    /* #ifndef APP-NVUE */
			    transition: all linear .15s;
			    /* #endif */
			}
		}
	}
    .indicator{
		position:fixed;
		z-index:15;
		bottom: 100rpx;
		left: 0;
		
		display: flex;
		justify-content: center;
		flex-direction: row;
		align-items: center;
		.indicator-dots{
			width: 15rpx;
			height: 15rpx;
			margin: 0 15rpx;
			border-radius:50%;
		}
		.dots-yes{
			background: #ffffff;
		}
		.dots-no{
			background: #999999;
		}
	}
}
</style>